<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <!-- <img src="./back.png"> -->
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>
<script>
  // var o = {
  //   arr: [],

  //   groups() {
  //     console.log("groups", this);
  //     let groups = {};
  //     let list = this.arr;
  //     // let len = list.length;//注释本行视图不会自动刷新
  //     // list = Object.keys(list);
  //     for (const i in list) {
  //       // console.log(i);
  //       let item = list[i];
  //       // let item = this.list[i];
  //       let groupName = item.group || "默认分组";
  //       groups[groupName] = groups[groupName] || [];
  //       groups[groupName].push(item);
  //     }
  //     return groups;
  //   }

  // };

  // var p = new Proxy(o, {
  //   get(obj, prop) {
  //     console.warn("[get]", obj, prop);
  //     if (prop == 'groups') {
  //       return obj[prop]()
  //     }
  //     return obj[prop];
  //   },
  //   set(obj, prop, value) {
  //     console.warn("[set]", obj, prop, value);
  //   }
  // });
  // var p1 = new Proxy(p.arr, {
  //   get(obj, prop) {
  //     console.warn("[p.arr][get]", obj, prop);
  //     // if (prop == 'length') {
  //     //   return o.arr
  //     // }
  //     return obj[prop];
  //   }
  // });
  // p.f = function () { }
  // // var p1 = new Proxy(f, {
  // //   get(obj, prop) {
  // //     console.warn("[f][get]", obj, prop);
  // //     return obj[prop];
  // //   }
  // // });
  // f = p.f
  // p1.push({})
  // // p.arr.push({});
  // // p.arr.push({});
  // console.log(f)
  var a ={o:{a:3},arr: [{ a: 1 }, { a: 2 }]};
  // a = { a: 1, b: 2 };
  var p = new Proxy(a, {
    get: function (target, prop) {
      console.log('get', target, prop);
      return target[prop];
    },
    has: function (target, prop) {
      console.log("has", target, prop);
      return target[prop];
    },
    // ownKeys: function (target, prop) {
    //   console.log("ownKeys", target, prop);
    //   return Object.keys(target)
    // }
  });

  console.error('======for in======')
  // for in  
  let o = {}
  for (var i in p) {
    console.log(p[i])
    o[i] = p[i];
  }
  new Proxy(o, {})
  console.error('======for of======')
  // for of 
  // for (var i of p) {
  //   console.log(i)
  // }
</script>